jQuery realizes option linkage wheel casting effect [with examples]

2021-02-17 06:09:27
OfStack


<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <link rel="stylesheet" href="css/baner.css">
 <script src="js/jquery-1.11.3.js"></script>
 <script src="js/index.js"></script>
 <title>JQ shuffling 3 Levels of chain </title>
 </head>
 <body>
  <div class="parent">
   <div class="top">
    <p>
      <a href=""> Creative space </a>
      <a href=""> Eternal love </a>
      <a href=""> Romantic love </a>
      <a href=""> Unique precious </a>
    </p>
   </div>
   <div class="fours">
    <a href=""><img src="img/1.jpg" alt=""></a>
    <a href=""><img src="img/2.jpg" alt=""></a>
    <a href=""><img src="img/3.jpg" alt=""></a>
    <a href=""><img src="img/4.jpg" alt=""></a>
   </div>
  </div>
 </body>
</html>

CSS


*{
  border:none;
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
}
html,body{
  width: 100%;
  height: 100%;
}
/* methods 2*/
body{
  display: flex;
  align-items: center;/**** Horizontal center ****/
  justify-content: center;/* Vertical center */
}
.parent{
  width: 750px;
  height: 400px;
  /* methods 1*/
  /*margin: 0 auto;*/
  /*position: relative;*/
  /*top: 50%;*/
  /*margin-top: -200px;*/
}
/* shuffling */
.top p{
  width: 90%;
  margin: 0 auto;
}
.top p a{
  display: inline-block;
  line-height: 30px;
  width: 23%;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  color: slategray;
}
.top p a.selected{
  border: 2px solid #e4393c;
  color: #e4393c;
}
/* The picture */
.fours{
  width: 650px;
  margin: 0 auto;
  height: 300px;
  position: relative;
  margin-top: 30px;
}
.fours a{
  position: absolute;
}

Define variables and timers. Variables are equivalent to index in eq(index). Automatic rotation is possible, but the key is how to match the desired rotation when the mouse enters the TAB area.

Method: stop the timer, get the current TAB subscript, match the corresponding rotation screen is displayed.


var a=0;
var t=null;
$(function(){
  $('.fours>a:not(:first-child)').hide();
  t=setInterval("autoMove()",2000);
  // Mouse over to stop the rotation 
  $('.parent').hover(function(){clearInterval(t)},function(){t=setInterval("autoMove()",2000);});
//  The image changes when the mouse goes over the corresponding option 
  $(".top p>a").hover(function(){
   clearInterval(t);
   var num=$(this).index();
   showThis(num);
  //console.log(num);
  })
});
function autoMove(){
 a++;
 if(a>=4){
  a=0;
 }
 play(a);
}
function play(a){
  $('.fours>a').filter(":visible").fadeOut(500).parent().children().eq(a).fadeIn(1000);
  $('.top p a').eq(a).addClass("selected").siblings().removeClass("selected");
}
// Mouse entry situation 
function showThis(sum){
  $(".fours>a").eq(sum).fadeIn(1000).siblings().fadeOut(500);
  $(".top p a").eq(sum).addClass("selected").siblings().removeClass("selected");
}